/*
 * @Author: your name
 * @Date: 2020-09-08 19:58:23
 * @LastEditTime: 2020-09-08 20:01:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \PipeOneMap_WebClient\src\app\business\pipe-statistics\component\g2-pie\g2-pie.component.ts
 */

import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { v4 as uuidv4 } from 'uuid';
@Component({
  selector: 'app-g2-pie',
  templateUrl: './g2-pie.component.html',
  styleUrls: ['./g2-pie.component.scss']
})
export class G2PieComponent implements OnInit, OnChanges {
  @Input() data = null;
  id = uuidv4();
  charts = null;
  constructor() { }

  ngOnInit() {
  }

  configureChart(chart) {
    // if (this.charts) {
    //   this.charts.destory();
    // }
    this.charts = chart;
    this.charts.coordinate('theta', {
      radius: 0.75,
    });
    this.charts.data(this.data);
    this.charts.tooltip({
      showTitle: false,
      showMarkers: false,
    });
    this.charts
      .interval()
      .position('value')
      .color('name')
      .label('name*value', {
        layout: { name: 'pie-spider' },
        labelHeight: 20,
        content: (obj) => `${obj.name} (${obj.value})`,
        labelLine: {
          style: {
            lineWidth: 0.5,
          },
        },
      })
      .adjust('stack');
    this.charts.interaction('element-active');
    this.charts.render();
  }

  ngOnChanges(changes: SimpleChanges) {
    if (this.charts){
      this.charts.changeData(this.data);
      this.charts.render();
    }
  }

}

